<template>
  <div>
    <div contenteditable="true" class="copy">湿哒哒大啊实打实大大</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 读取剪贴板中的文本内容
    // navigator.clipboard
    //   .readText()
    //   .then((res) => {
    //     console.log(res); // 打印剪贴板中的文本内容
    //   })
    //   .catch((err) => {
    //     alert("您未打开读取粘贴板权限"); // 提示用户未打开读取粘贴板权限
    //   });

    // 监听剪切板粘贴事件
    let dom = document.querySelector(".copy");
    dom.addEventListener("paste", (event) => {
      let file = event.clipboardData.files[0]; // 获取粘贴进剪贴板的文件
      console.log(file); // 打印粘贴进剪贴板的文件
      if (file) {
        let fileType = file.type; // 获取文件类型
        if (fileType.startsWith("image/")) {
          let reader = new FileReader(); // 创建文件读取器
          reader.onload = (e) => {
            let img = new Image(); // 创建图片元素
            img.src = e.target.result; // 设置图片元素的src属性为文件读取结果
            dom.append(img); // 将图片元素添加到剪贴板元素中
          };
          reader.readAsDataURL(file); // 将文件以数据URL的形式读取
          let formdata = new FormData(); // 创建表单数据对象
          formdata.append("file", file); // 将文件添加到表单数据对象中
        }
      }
    });
    // 为复制事件添加监听器
    dom.addEventListener("copy", (event) => {
      //复制之后添加内容
      let text = window.getSelection().toString();
      navigator.clipboard.writeText(text + "不能复制");

      // navigator.clipboard
      //   .readText()
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      // console.log("复制");
      // // 读取剪贴板中的文本内容
      // navigator.clipboard
      //   .readText()
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });

      console.log();
    });
  },
};
</script>

<style lang="less" scoped>
.copy {
  background-color: #fff; // 设置剪贴板元素的背景颜色为白色
  min-height: 100px; // 设置剪贴板元素的最小高度为100px
  outline: none; // 去除剪贴板元素的轮廓
}
</style>
